<template>
	<!-- 我的农事 -->
	<view class="content" v-else>
		<view class="list">
			<view class="item" v-for="(item,i) in husbandryList" :key="item.id" @click="tabIndexFn(i)">
				<view class="left">
					<view class="title">
						<image v-if="item.executeStatus==0" class="titleIcon"
							src="/subPages/static/my/husbandry/green.png" mode=""></image>
						<image v-else class="titleIcon" src="/subPages/static/my/husbandry/orange.png" mode="">
						</image>
						地块信息
					</view>
					<view class="info flex-wrap flex-col">
						<view class="text">地块编码: {{item.landCode.split(',').join('\n')}}</view>
						<view class="text">地块面积: {{item.plantArea}}亩</view>
						<view class="text">作物种类：{{$util.getDictData('produce_info_crop_specie',item.cropSpecie)}}</view>
						<view class="text">作物品种：{{item.cropVarieties}}</view>
						<view class="text">计划时间：{{$util.timestampToTime(item.planTime)}}</view>
						<view class="text">采收时间：{{$util.timestampToTime(item.harvestTime)}}</view>
						<view class="text" v-if="item.executeStatus==0">执行时间：{{$util.timestampToTime(item.executeTime)}}
						</view>
					</view>
					<view class="btn-list justify-center align-center">
						<view class="btn" @click="toDetail(item.id,item.executeStatus)"
							:class="{green:item.executeStatus==0,orange:item.executeStatus==1}">
							{{$util.getDictData('produce_husbandry_events',item.husbandryEvents)}}
						</view>
					</view>
					<view class="position" :class="{green:item.executeStatus==0,orange:item.executeStatus==1}">
						{{$util.getDictData('produce_husbandry_execute_status',item.executeStatus)}}
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" height="5rem"></u-loadmore>
	</view>
</template>

<script>
import {getHusbandryList, getPlantOne} from '@/api/my/husbandry.js'

export default {
		data() {
			return {
				activeIndex: 0,
				pageInfo: {
					pageNo: 1,
					pageSize: 10,
				},
				husbandryList: [],
				status: 'loading'
			};
		},
		methods: {
			tabIndexFn(i) {
				this.activeIndex = i;
			},
			toDetail(id, status) {
				if (status == 0) {
					uni.navigateTo({
						url: '/subPages/my/husbandry/finishDetail/index?id=' + id
					})
				} else {
					uni.navigateTo({
						url: '/subPages/my/husbandry/detail/index?id=' + id
					})
				}
			},
			// 获取我的农事列表
			async getHusbandryListFn() {
				let memberId = uni.getStorageSync('userInfo').id;
				let res = await getHusbandryList({
					...this.pageInfo,
					memberId
				})
				if (res.list.length < 6) {
					this.status = 'nomore'
				}
				res.list.forEach(async (v) => {
					let res2 = await getPlantOne({
						id: v.infoId
					})
					v.landCode = res2.landCode;
					v.cropVarieties = res2.cropVarieties;
					v.cropSpecie = res2.cropSpecie;
					v.plantArea = res2.plantArea;
					this.husbandryList.push(v)
				})
			},
			initFn() {
				this.pageInfo.pageNo = 1;
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.husbandryList = []
			}
		},
		onLoad() {
			this.getHusbandryListFn();
		},
		onReachBottom() {
			this.pageInfo.pageNo++
			this.getHusbandryListFn()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-size: 1.4rem;
		box-shadow: inset 0rem .2rem .4rem .1rem rgba(153, 153, 153, 0.051);

		.list {
			.item {
				position: relative;
				width: calc(100% - 2rem);
				margin: 1.5rem 1rem 0;
				padding: 2rem;
				background: #FFFFFF;
				box-shadow: -0.1rem .3rem .6rem .1rem rgba(153, 153, 153, 0.3);
				border-radius: .8rem;
				display: flex;
				justify-content: space-between;
				border: .1rem solid transparent;

				.left {
					color: #333;
					width: 100%;

					.title {
						display: flex;
						align-items: center;
						font-size: 1.6rem;
						font-weight: bold;
						margin-bottom: .5rem;

						.titleIcon {
							width: .5rem;
							height: 1.5rem;
							margin-right: .5rem;
						}
					}

					.text {
						margin-top: .5rem;
					}

					.btn-list {
						margin-top: 1.5rem;
						width: 100%;

						.btn {
							width: 16.5rem;
							height: 3.3rem;
							line-height: 3.3rem;
							margin: 0 auto;
							background: #eee;
							text-align: center;
							border-radius: .4rem;
							margin: .5rem;
							color: #fff;
						}

						.btn.orange {
							background: rgba(252, 111, 33, .8);
						}

						.btn.green {
							background: rgba(83, 147, 108, .8);
						}
					}
				}

				.position {
					position: absolute;
					top: 0;
					right: 0;
					width: 5rem;
					height: 2.5rem;
					line-height: 2.5rem;
					text-align: center;
					font-size: 1.3rem;
					color: #fff;
					border-radius: 0 .8rem 0 0;
				}

				.position.orange {
					background: #fc6f21;
				}

				.position.green {
					background: #53936c;
				}
			}
		}

	}
</style>
